<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的导游</title>

    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link href="../../js/dist/summernote.css" rel="stylesheet" />

    <!-- 引入外部的css样式 -->
    <link rel="stylesheet" href="../../plugins/bootstrap/css/animate.css" type="text/css">
    <link rel="stylesheet" href="../../plugins/bootstrap/css/font-awesome.css?v=4.4.0" type="text/css">

    <!-- 引用自己写的css样式 -->
    <link href="../../css/index/index.css" rel="stylesheet" type="text/css">


    <!-- 表单 -->
    <link rel="stylesheet" type="text/css" href="../../css/daoyou/normalize.css" />

    <link rel="stylesheet" type="text/css" href="../../css/daoyou/demo.css" />
    <link rel="stylesheet" type="text/css" href="../../css/daoyou/component.css" />


    <style>
        #jiedan th {
            text-align: center;
            margin: 0 auto;
        }

        #jiedan td {
            text-align: center;
            margin: 0 auto;
        }
    </style>

</head>

<body>

    <!-- 导航栏 -->
    <div class="container-fluid" id="head" style="margin-bottom: 0px;">
        <div class="row">

            <nav class="navbar" role="navigation"
                style="background-color: rgb(206, 228, 247);padding-left: 100px;margin-bottom: 0px">
                <div class="container-fluid">
                    <div>
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse" style="background-color: royalblue">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a href="index.html"> <img src="../../imgs/index/logo.jpg" alt="失败" id="logo"
                                class="img-circle navbar-brand"></a>
                        <a class="navbar-brand" href="index.html" style="padding-left: 0px;font-family:楷体">
                            <span data-toggle="tooltip" title="悠 U 新方式">
                                悠&nbsp;U</span></a>
                    </div>

                    <div class="collapse navbar-collapse" id="example-navbar-collapse ">
                        <ul class="nav navbar-nav ">
                            <li><a href="index.html">
                                    <span style="padding:0px 20px" data-toggle="tooltip" title="首页"> 首页</span></a></li>

                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    游记<b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">
                                            <span class="glyphicon glyphicon-user"
                                                style="text-shadow: rgb(216, 206, 206) 3px -1px;"></span>
                                            &nbsp;达人
                                            <span class="badge pull-center" style="background-color: red">hot</span>
                                        </a></li><br>
                                    <li><a href="#">
                                            <span class="glyphicon glyphicon-edit"></span>
                                            写游记
                                            <span class="badge pull-center"
                                                style="background-color: red;font-size:3px">赚钻石</span>
                                        </a></li><br>
                                    <li><a href="#">
                                            <span class="glyphicon glyphicon-flag"></span>
                                            游记主页</a></li><br>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    景点<b class="caret"></b>
                                    <!-- <span class="label label-danger" style="font-size: 1px;">NEW</span>-->
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#"><span class="glyphicon glyphicon-fire">&nbsp;主题景点</span>
                                            <span class="badge pull-center"
                                                style="background-color: red;font-size:3px">NEW</span>
                                        </a></li><br>
                                    <li><a href="#"><span class="glyphicon glyphicon-plane">&nbsp;精品行程</span></a></li>
                                    <br>
                                    <li><a href="#"><span class="glyphicon glyphicon-bell">&nbsp;当地玩乐</span></a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">
                                    <span data-toggle="tooltip" title="导&nbsp;游">导游</span>
                                    <!-- <span class="badge pull-center"
                                        style="color: red;font-size:1px">hot</span> -->
                                </a>
                            </li>

                        </ul>

                        <!-- <div style="padding-top:15px" class="">
                                <input type="text" placeholder="用户/游戏/动态" style=" height:20px">
                                
                            </div> -->


                        <ul class="nav navbar-nav navbar-right" style="padding-right: 100px">

                            <li class="dropdown">
                            <li> <a></a></li>
                            <li><a href="#" class="dropdown-toggle" data-toggle="dropdown"
                                    style="font-family: 楷体;padding-left: 0px">
                                    我的悠 U &nbsp;<img id="headerImg" src="../../imgs/index/head.jpg"
                                        class="img-circle"><b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="#">我的订单</a>
                                    </li>
                                    <li>
                                        <a href="#">我的导游</a>
                                    </li>
                                    <li>
                                        <a href="#">我的钱包</a>
                                    </li>

                                    <li>
                                        <a href="#">我的游记</a>
                                    </li>
                                    <li class="divider"></li>
                                    <li> <a href="#">互动信息</a> </li>
                                    <li> <a href="#">我的账号</a> </li>
                                    <li> <a href="#">退出</a> </li>

                                </ul>
                            </li>
                            <li><a href="#weibo" style="padding-left:8px;padding-right: 8px"><i
                                        class="fa fa-weibo"></i></a></li>
                            <li><a href="#weixin" style="padding-left:8px;padding-right: 8px"><i
                                        class="fa fa-weixin"></i> </a></li>
                            <li><a href="#weixin" style="padding-left:8px;padding-right: 8px"> <i
                                        class="fa fa-qq"></i></a></li>
                            <li><a href="" style="padding-left:10px;padding-right: 10px">登录</li> </a>
                            <li><a href="" style="padding-left:10px;padding-right: 10px">注册</li> </a>



                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <!-- 导航栏 -->

    <p style="font-size:25px;color: black;text-align:center ;font-family:Georgia, serif; margin-top:30px">
        Welcome guests from afar
        <img   style="width: 30px;height:30px" src="../../imgs/travler/flower.png">
    </p>

    <div class="container" style="margin-top: 20px;">
        <div class="row">


            <!-- 侧边栏 -->
            <div class="col-md-2">

                <div style="height: 60px;text-align: center;background-color: rgb(235, 243, 247); text-align: center;line-height:60px; border-bottom:1px solid #ddd;color: #555; width: 180px;"
                    onclick="f1()">

                    <a href="" style="text-decoration: none;font-size: 20px;">
                        我的悠U
                    </a>
                </div>

                <div style="height: 45px;text-align: center;background-color: rgb(235, 243, 247); text-align: center;line-height:45px; border-bottom:1px solid #ddd;;color: #555; width: 180px;"
                    onclick="f2()">
                    <span class="glyphicon glyphicon-bell"></span>
                    <a style="text-decoration: none;cursor: pointer;font-size: 16px;">
                        我的订单
                    </a>
                </div>


                <div style="height: 45px;text-align: center;background-color: rgb(235, 243, 247); text-align: center;line-height:45px; border-bottom:1px solid #ddd;;color: #555; width: 180px;"
                    onclick="f3()">
                    <span class="glyphicon glyphicon-magnet "></span>
                    <a style="text-decoration: none;cursor: pointer;font-size: 16px;">
                        路线规划
                    </a>
                </div>


                <div style="height: 45px;text-align: center;background-color: rgb(235, 243, 247); text-align: center;line-height:45px; border-bottom:1px solid #ddd;;color: #555; width: 180px;"
                    oncanplay="f4()">
                    <span class="glyphicon glyphicon-tasks "></span>
                    <a style="text-decoration: none;cursor: pointer;font-size: 16px;">
                        我的状态
                    </a>
                </div>

                <div style="height: 45px;text-align: center;background-color: rgb(235, 243, 247); text-align: center;line-height:45px; border-bottom:1px solid #ddd;;color: #555; width: 180px;"
                    oncanplay="f5()">
                    <span class="glyphicon glyphicon-tasks "></span>
                    <a style="text-decoration: none;cursor: pointer;font-size: 16px;">
                        正在执行
                    </a>
                </div>
                <div style="height: 45px;text-align: center;background-color: rgb(235, 243, 247); text-align: center;line-height:45px; border-bottom:1px solid #ddd;;color: #555; width: 180px;"
                    oncanplay="f5()">
                    <span class="glyphicon glyphicon-tasks "></span>
                    <a style="text-decoration: none;cursor: pointer;font-size: 16px;">
                        订单详情
                    </a>
                </div>





            </div>
            <!-- 侧边栏 -->


            <!-- 主体 -->
            <div class="col-md-9 " id="dingdan" style="margin-bottom: 30p;margin-left:60px;display:none">


                <!-- 订单详情 -->
                <div class="col-md-12"
                    style="height:50px; text-align: center;line-height:50px;margin-top:10px;border:1px solid #ddd;border-radius:5px;background-color: rgb(235, 243, 247);">

                    <span style="margin-left:0px">
                        🔔
                    </span>
                    <span style="margin-left: 10px;font-size: 15px;">

                        申请人: 小明
                    </span>


                    <span style="margin-left: 30px;font-size: 15px;">

                        出行人数: 2人
                    </span>
                    <span style="margin-left: 30px;font-size: 15px;">
                        出行日期: 2019-10-20
                    </span>
                    <span style="margin-left: 30px;font-size: 15px;">
                        出行天数:3天
                    </span>
                    <span style="margin-left: 30px;font-size: 15px;">
                        性别:男
                    </span>

                    <button type="button" class="btn btn-success" style="font-size: 13px;margin-left: 10px;">同意</button>
                    <button type="button" class="btn btn btn-danger"
                        style="font-size: 13px;margin-left: 10px;">拒绝</button>

                </div>


                <div class="col-md-12"
                    style="height:50px; text-align: center;line-height:50px;margin-top:10px;border:1px solid #ddd;border-radius:5px;background-color: rgb(235, 243, 247);">

                    <span style="margin-left:0px">
                        🔔
                    </span>
                    <span style="margin-left: 10px;font-size: 15px;">

                        申请人: 小明
                    </span>


                    <span style="margin-left: 30px;font-size: 15px;">

                        出行人数: 2人
                    </span>
                    <span style="margin-left: 30px;font-size: 15px;">
                        出行日期: 2019-10-20
                    </span>
                    <span style="margin-left: 30px;font-size: 15px;">
                        出行天数:3天
                    </span>
                    <span style="margin-left: 30px;font-size: 15px;">
                        性别:男
                    </span>

                    <button type="button" class="btn btn-success" style="font-size: 13px;margin-left: 10px;">同意</button>
                    <button type="button" class="btn btn btn-danger"
                        style="font-size: 13px;margin-left: 10px;">拒绝</button>

                </div>


                <!-- end 订单详情 -->





            </div>
            <!-- 图表格 -->
            <div class="col-md-9 " id="tubiao" style="margin-bottom: 30p;margin-left:60px;display:none">

                <div id="main" style="width: 600px;height:400px;"></div>
                <p style="margin-left: 250px;">本季度业绩一览表</p>

            </div>
            <!-- 图标end -->



            <!--正在接单详情 -->

            <div class="col-md-9 " id="jiedan" style="margin-bottom: 30p;margin-left:60px;">

               
                <table>
                    <thead>
                        <tr>
                            <th>名称</th>
                            <th>详情</th>

                        </tr>
                    </thead>
                    <tbody>

                        <tr>
                            <td class="user-name">名字</td>
                            <td class="user-email">张三</td>

                        </tr>
                        <tr>
                            <td class="user-name">性别</td>
                            <td class="user-email">男</td>

                        </tr>
                        <tr>
                            <td class="user-name">出行日期</td>
                            <td class="user-email">2019-04-01</td>
                        </tr>
                        <tr>
                            <td class="user-name">出行天数</td>
                            <td class="user-email">三天</td>
                        </tr>
                        <tr>
                            <td class="user-name">联系方式</td>
                            <td class="user-email">18735572024</td>
                        </tr>
                        <tr>
                            <td class="user-name">出行人数</td>
                            <td class="user-email">两人</td>

                        </tr>

                    </tbody>
                </table>


                <div style="text-align: center;margin-top:30px;">

                <button type="button" class="btn btn-danger">退单</button>
            </div>
            </div>

            <!--正在接单详情 -->




        </div>




    </div>

    <!--主体-->
    </div>









    <!--引入bootstrap的js文件-->
    <script src="../../plugins/jquery/jquery.min.js"></script>

    <script src="../../plugins/bootstrap/js/bootstrap.js"></script>

    <script src="../../js/daoyou/echarts.min.js"></script>

    <script src="../../js/daoyou/jquery.ba-throttle-debounce.min.js"></script>

    <script src="../../js/daoyou/jquery.stickyheader.js"></script>

    <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">


        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [50, 60, 41, 50, 90, 70, 100],
                    type: 'line'
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>


        <!-- 显示和隐藏 -->


</body>

</html>